<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实时监测场景组态</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <!--全局css-->
    <link rel="stylesheet" href="../../../style.css">
    <style>
        .slider {
            width: 35px;
            height: 35px;
            cursor: pointer;
            position: absolute;
        }
        .paramSpan{
            font-size: 18px;
            cursor: pointer;
        }
        .img{
            width: 35px;
            height: 35px;
        }
        .devSpan{
            top: 40px;
            position: relative;
            white-space: nowrap;
            color: blue;
        }

        .chart-outer {
            height: 200px;
        }

        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }

        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }

        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        .chart-outer {
            height: 300px;
        }

        .deviceInfo {
            height: 300px;
        }

        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }

        li {
            list-style-type: none;
        }

        .paramDiv {
            width: 100%;
            background: #fff;
            height: auto;
        }
        el-col{
            position: absolute;
        }
    </style>

</head>
<body>

<div class="page" id="page-vue">
    <div class="">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode" :tabsign="'p'" :energy="'Total'"></dev-tree>
            </el-col>
            <el-col :span="3">
                <h5 style="text-align: center">场景列表</h5>
                <el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#ecf8ff">
                    <el-menu-item v-for="(item, index) in sceneList" :index="index">
                        <i class="el-icon-document"></i>
                        <span slot="title">{{item.SceneName}}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="4">
                <h5 style="text-align: center">设备检测点</h5>
                <el-tree
                        :data="devTree"
                        show-checkbox
                        node-key="Id"
                        default-expand-all
                        :default-checked-keys="checkData"
                        check-strictly="true"
                        ref="tree"
                        @check-change="handleCheck"
                        :props="defaultProps">
                </el-tree>
            </el-col>
            <el-col :span="13" style="overflow: hidden">
                <el-button style="left: 85%;position: relative" type="success" :disabled="SceneID==null?true:false" @click="saveBtn()">确认修改</el-button>
                <div id="contain" style="width:auto;overflow: scroll">
                    <div id="box" style="background-repeat:no-repeat;">
                    </div>
                </div>

            </el-col>
        </el-row>

    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    let vuePageIndex = new Vue({
        el: '#page-vue',
        data: {
            proNo: '',
            sceneList:[],
            img:{
                'Electric':'../../../imgs/electric.png',
                'Water':'../../../imgs/water.png',
            },
            defaultProps:{
                  label:'Text',
                   id:'Id',
            },
            devTree:[], //树形数据
            checkData:[], //选中数据
            proData:[]  ,//树形之前数据。 便于筛选,
            SceneID:null,
        },
        methods: {
            userNode(data){
                this.proNo = '';
                this.SceneID =null;
                if(data.id.indexOf('P')==-1){
                 return;
                }
                this.proNo = data.attributes.projectNo;
                this.getScene();
                this.getProTree();
            },
            saveBtn(){
               let doms = $("#box div");
               let tagIds = [],topLefts =[];
               let devIds = [],tagPoint=[],fields=[];
               for (let i = 0;i<doms.length;i++){
                   if (doms[i].attributes[2].value == 'dev'){
                       tagIds.push(doms[i].id);
                       topLefts.push(doms[i].offsetLeft + ',' + doms[i].offsetTop);

                   }else {
                       devIds.push(doms[i].id.split('-')[0]);
                       tagPoint.push(doms[i].offsetLeft+','+doms[i].offsetTop);
                       fields.push(doms[i].id.split('-')[1]);
                   }
               }


                HttpUtil.get('ScadaTag/Add',{SceneID:this.SceneID,DeviceID:devIds.join(','), LeftTops:tagPoint.join('|'),field:fields.join(',')}).success((res)=>{
                    HttpUtil.get('ScadaDevice/Add',{SceneID:this.SceneID,DeviceID:tagIds.join('|'),TopLefts:topLefts.join('|')}).success((res)=>{
                          this.getDevList();
                    });
                });
            },
            getScene(){
                HttpUtil.get('ScadaScene/List',{projectNo:this.proNo}).success((res)=>{
                    this.sceneList = res.data;
                })
            },
            getProTree(){
               HttpUtil.get('User/getProjectTree',{projectNo:this.proNo}).success((res)=>{
                     this.proData = res.data;
                     this.devTree = this.parseZone(res.data,'Z_0');
               })
            },
            //递归成树形数据
            parseZone(data,pid) {
                const result = []
                let temp = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].ParentId === pid) {
                        if (data[i].Id.indexOf('D')==-1){
                            data[i].disabled = true;
                        }
                        const obj =data[i]
                        temp = this.parseZone(data, data[i].Id)
                        if (temp.length > 0) {
                            obj.children = temp
                        }
                        result.push(obj)
                    }
                }
                return result
            },
            handleCheck(data, checked) {
                   if (!checked){
                       $('#'+data.attributes.deviceId).remove();
                       $('#'+data.attributes.deviceId+'-PV_05').remove();
                       $('#'+data.attributes.deviceId+'-PV_06').remove();
                       $('#'+data.attributes.deviceId+'-PV_07').remove();
                       $('#'+data.attributes.deviceId+'-PV_01').remove();
                   }else {
                       let elemt = $("#box div");
                       for (let i = 0; i < elemt.length; i++) {
                           if (elemt[i].id==data.attributes.deviceId){
                               return;
                           }
                       }
                       $('#box').append('<div  id= ' + data.attributes.deviceId + ' class="slider" type="dev" title='+data.Text+'><span class="devSpan">'+data.Text+'</span></div>');
                       $('#box').append('<div  id= ' + data.attributes.deviceId +'-PV_05 type="PV_05"  class="paramSpan">'+data.Text+'-IA</div>');
                       $('#box').append('<div  id= ' + data.attributes.deviceId +'-PV_06 type="PV_06" class="paramSpan" >'+data.Text+'-IB</div>');
                       $('#box').append('<div  id= ' + data.attributes.deviceId +'-PV_07 type="PV_07" class="paramSpan">'+data.Text+'-IC</div>');
                       $('#box').append('<div  id= ' + data.attributes.deviceId +'-PV_01 type="PV_01" class="paramSpan">'+data.Text+'-P</div>');
                       this.dragInit(data.attributes.deviceId+'-PV_05','param',0,0);
                       this.dragInit(data.attributes.deviceId+'-PV_06','param',0,0);
                       this.dragInit(data.attributes.deviceId+'-PV_07','param',0,0);
                       this.dragInit(data.attributes.deviceId+'-PV_01','param',0,0);
                       this.dragInit(data.attributes.deviceId,data.attributes.deviceType,0,0);
                   }
            },
            handleSelect(key) {
                this.setBoxImg(key);

                this.checkData = [];
                this.SceneID = this.sceneList[key].SceneID;
                this.$refs.tree.setCheckedKeys([]);
                this.getDevList();
            },
            getDevList(){
                $('#box').empty();
                HttpUtil.get('ScadaDevice/List',{SceneID: this.SceneID}).success((res)=>{
                    for (let item of res.data){
                        $('#box').append('<div  id= ' + item.DeviceID + '  class="slider" type="dev" title='+item.DeviceName+'><span class="devSpan">'+item.DeviceName+'</span></div>');
                        this.dragInit(item.DeviceID,item.deviceType,item.Top,item.Left1)
                        for (let temp of this.proData){
                            if (item.DeviceID == temp.attributes.deviceId){
                                this.checkData.push(temp.Id);
                                this.$refs.tree.setCheckedKeys(this.checkData);
                            }
                        }
                    }
                }) ;
                let type = {
                    'IA': 'PV_05',
                    'IB': 'PV_06',
                    'IC': 'PV_07',
                    'Power':'PV_01'
                }
                HttpUtil.get('ScadaTag/List',{SceneID: this.SceneID}).success((res)=>{
                    for (let item of res.data){
                        $('#box').append('<div  id= ' + item.DeviceID +'-'+type[item.field]+' type="'+type[item.field]+'"  class="paramSpan">'+item.field+'-'+item.value+'</div>');
                        this.dragInit(item.DeviceID+'-'+type[item.field],'param',item.Top,item.Left1);
                    }
                }) ;
            },
            //图片背景
            setBoxImg(index){
                $("#box").css("background-image", "url('')");
                // 根据索引 设置 不同场景的 不同背景图
                if (this.sceneList[index].ImageName != null) {
                    let img = new Image();
                    img.src = 'http://iot.hzcando.com:10004' + this.sceneList[index].ImageName;
                    if (img.complete) {
                        let style = {
                            position: "relative",
                            width: img.width +"px",
                            height: img.height +"px",
                            top: "10px",
                            left: "10px",
                        }
                        for (let key in style) {
                            document.getElementById('box').style[key] = style[key];
                        }
                        document.getElementById('contain').style.height = img.height*1.2 + 'px';
                        $("#box").css("background-image", "url(" + img.src + ")");
                    } else {
                        img.onload = function () {
                            let style = {
                                position: "relative",
                                width: img.width +"px",
                                height: img.height +"px",
                                top: "10px",
                                left: "10px",
                            }
                            for (let key in style) {
                                document.getElementById('box').style[key] = style[key];
                            }
                            document.getElementById('contain').style.height = img.height*1.2 + 'px';
                            $("#box").css("background-image", "url(" + img.src + ")");
                            img.onload = null;//避免重复加载
                        }
                    }
                }
            },
            // 标点
            dragInit: function (id,deviceType,m,n) {
                var $box = document.getElementById('box');
                var $div = document.getElementById(id);
                if (deviceType!='param'){
                    if (m == 0 && n == 0) {
                        var style = {
                            position: "absolute",
                            top: "0" + 'px',
                            left: "0" + 'px',
                            background:"url("+this.img[deviceType]+")",
                        }
                    } else {
                        var style = {
                            position: "absolute",
                            top: m + 'px',
                            left: n + 'px',
                            background:"url("+this.img[deviceType]+")",
                        }
                    }
                } else{
                    if (m == 0 && n == 0) {
                        var style = {
                            position: "absolute",
                            top: "0" + 'px',
                            left: "0" + 'px',

                        }
                    } else {
                        var style = {
                            position: "absolute",
                            top: m + 'px',
                            left: n + 'px',

                        }
                    }
                }


                for (var k in style) {
                    $div.style[k] = style[k];
                }
                $div.onmousedown = function (e) { //鼠标按下位置；
                    e = e || window.event;
                    var x = e.clientX - $div.offsetLeft;
                    var y = e.clientY - $div.offsetTop;
                    document.onmousemove = function (e) { //鼠标按下后移动位置；
                        e = e || window.event;
                        var L = e.clientX - x;
                        var T = e.clientY - y;
                        //var pW = document.documentElement.clientWidth;//页面宽度；
                        //var pH = document.documentElement.clientHeight;
                        var boxW = $box.offsetWidth;
                        var boxH = $box.offsetHeight;
                        var divW = $div.offsetWidth; //div的宽；
                        var divH = $div.offsetHeight;
                        //范围限制
                        if (L < 0) {
                            L = 0;
                        }
                        if (T < 0) {
                            T = 0;
                        }
                        //if(L > pW - divW){L = pW - divW;}
                        //if(T > pH - divH){T = pH - divH;}
                        if (L > boxW - divW) {
                            L = boxW - divW;
                        }
                        if (T > boxH - divH) {
                            T = boxH - divH;
                        }
                        $div.style.left = L + "px";
                        $div.style.top = T + "px";
                    }
                    document.onmouseup = function (e) {
                        document.onmousemove = null; //如果不取消，鼠标弹起div依旧会随着鼠标移动
                        document.onmouseup = null;
                    }
                }

                return $div;
            },
        },
        created: function () {

        },
        mounted: function () {

        }
    });


</script>

</body>
</html>
